import { useEffect, useState } from 'react';
import { View, Picker } from '@tarojs/components';
import { AtButton, AtForm, AtInput, AtList, AtListItem } from 'taro-ui';

import Taro from '@tarojs/taro';
import { adduserLineal, getUserLinealDetail } from '@/service/apis/mine';
import './style.scss';

const INPUT_TYPE = {
  name: 'name',
  mobile: 'mobile',
};

const verify = /^1[3|4|5|6|7|8|9][\d]{9}$/;

/**
 * 直系亲属信息
 */
const FamilyCard = () => {
  const querys: any = Taro.getCurrentInstance().router?.params;
  const [formValue, setFormValue] = useState<any>({});
  const [currentSex, setCurrentSex] = useState('请选择');
  const [currentRealation, setCurrentRealation] = useState('请选择');
  const sexSelector = ['男', '女'];
  const relationSelector = ['儿子', '女儿', '孙子', '孙女'];

  const onSubmit = async () => {
    const { name, mobile, gender, familyType } = formValue;
    if (!verify.test(mobile)) {
      Taro.showToast({
        title: '请输入正确的手机号',
        icon: 'none',
      });
      return;
    }
    if (name && mobile && gender && familyType) {
      try {
        await adduserLineal(formValue);
        Taro.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 2000,
        });
        setTimeout(() => {
          Taro.navigateBack();
        }, 2000);
      } catch (error) {
        Taro.showToast({
          title: '提交失败',
          duration: 2000,
        });
      }
    } else {
      Taro.showToast({
        title: '请输入或上传完整信息',
        icon: 'none',
      });
    }
  };
  const handleChange = (type: string) => {
    return (val: string) => {
      setFormValue({
        ...formValue,
        [INPUT_TYPE[type]]: val,
      });
    };
  };
  const onChangeSex = (e: any) => {
    setCurrentSex(sexSelector[e.detail.value]);
    setFormValue({
      ...formValue,
      gender: sexSelector[e.detail.value] === '男' ? 1 : 2,
    });
  };
  const onChangeRelation = (e) => {
    setCurrentRealation(relationSelector[e.detail.value]);
    setFormValue({
      ...formValue,
      familyType: relationSelector[e.detail.value],
    });
  };

  useEffect(() => {
    if (querys.status === '1' || querys.status === '2') {
      getDetail();
    }
  }, []);

  const getDetail = async () => {
    try {
      const data = await getUserLinealDetail();
      console.log(data);
      const { lineals } = data;
      setFormValue({
        name: lineals.name,
        mobile: lineals.mobile,
        gender: lineals.gender,
        familyType: lineals.relation,
      });
      setCurrentSex(lineals.gender === 1 ? '男' : '女');
      setCurrentRealation(lineals.relation);
    } catch (err) {
      console.log('error');
    }
  };

  return (
    <AtForm onSubmit={onSubmit} className="family-card-wrap page-container">
      <View className="input-text-wrap">
        <AtInput
          name="name"
          title="直系亲属姓名"
          type="text"
          placeholder="请输入"
          value={formValue.name}
          onChange={handleChange(INPUT_TYPE.name)}
        />
        <AtInput
          name="mobile"
          title="直系亲属手机号码"
          type="text"
          placeholder="请输入"
          value={formValue.mobile}
          onChange={handleChange(INPUT_TYPE.mobile)}
          maxlength={11}
        />
        <View className="input-section">
          <Picker mode="selector" range={sexSelector} onChange={onChangeSex}>
            <AtList>
              <AtListItem title="直系亲属性别" extraText={currentSex} />
            </AtList>
          </Picker>
        </View>
        <View className="input-section no-border">
          <Picker mode="selector" range={relationSelector} onChange={onChangeRelation}>
            <AtList>
              <AtListItem title="与直系亲属关系" extraText={currentRealation} />
            </AtList>
          </Picker>
        </View>
      </View>
      <AtButton className="submint-btn" onClick={onSubmit}>
        {querys.status === '0' ? '提交' : '更改'}
      </AtButton>
    </AtForm>
  );
};
export default FamilyCard;
